<%--
  Created by IntelliJ IDEA.
  User: Root404
  Date: 2022/7/12
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>欢迎来到主界面</h1>
<%--table border="4">
<tr>
    <th>id</th>
    <th>name</th>
    <th>sex</th>
    <th>hobby</th>
    <th>操作</th>
</tr>
    <c:forEach items="${list}" var="user" varStatus="status">
<tr <c:if test="${status.index%2==0}">style="background-color: green" </c:if> >
    <td>${user.id}</td>
    <td>${user.name}</td>
    <td>${user.sex==1?"男":"女"}</td>
    <td>${user.hobby}</td>
    <td>
        <a href="${pageContext.request.contextPath}/ServleUser?op=delete&id=${user.id}"><input type="button" value="删除" class="bt1"></a>
        <a href="${pageContext.request.contextPath}/ServleUser?op=update1&id=${user.id}"><input type="button" value="修改" ></a>
    </td>
</tr>
    </c:forEach>--%>

   <%-- </table>
<a href="${pageContext.request.contextPath}/jstlnc/add.jsp"><input type="button" id="add" value="增加"></a>--%>
异步文本1<input type="text" name="name" id="name"><span id="sp1"></span>
异步文本2<input type="text" name="name" id="tt"><span id="sp2"></span>
<input type="button" id="bt" value="点我异步查询">
<table id="table" border="4">
    <tr>
        <th>id</th>
        <th>name</th>
    </tr>
</table>
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul>
<ul id="ul4"></ul>

<script src="../js/jquery.js"></script>
<script>
    $("#bt").blur(function () {
        var text=$("#tt").val();
        //$("#table").html("");
        $.getJSON("${pageContext.request.contextPath}/ServletAjax151?name="+text,
        function (data) {
           /* var tr1= "<tr>"+"<th>"+sex+"</th>"+"<th>"+name+"</th>" +"</tr>" ;
            $("#table").append(tr1);*/
            $.each(data,function () {
                var tr2= "<tr>"+"<td>"+this.sex+"</td>"+"<td>"+this.name+"</td>" +"</tr>" ;
                $("#table").append(tr2);
            })
        });
       /* $.ajax({
            "url":"${pageContext.request.contextPath}/ServletAjax151?name="+text,
            type:"get",
            dataType:"json",
            success:function (data) {
                $.each(data,function () {
                    var li="<li>"+this.name+"</li>";
                    $("#ul4").append(li);
                });
            },error:function () {
                alert("异步错误");
            }
        });*/
    });




    var j1=[1,2,3,4];
    var $j=$(j1);
    $.each($j,function () {
        var li="<li>"+this+"</li>";
        $("#ul1").append(li);
    });
    var j2={"name":"吴超","age":32};
    var $j2=$(j2);
    $.each($j2,function () {
        var li="<li>"+this.name+"</li>";
        $("#ul2").append(li);
    });
    var j3=[{"name":"吴超1","age":32},{"name":"吴超2","age":32},{"name":"吴超3","age":32}];
    var $j3=$(j3);
    $.each($j3,function () {
        var li="<li>"+this.name+"</li>";
        $("#ul3").append(li);
    });


    $("#tt").blur(function () {
        var text=$("#tt").val();
        $.ajax({
            "url":"${pageContext.request.contextPath}/ServletAjax151?name="+text,
            success:function (data) {
                if(data.trim()=="y"){
                    $("#sp2").html("已被注册");
                }else{
                    $("#sp2").html("可以注册");
                }
            }
        });
    });




$("#name").blur(function () {
        var text=$("#name").val();
       // document.write(text);
        //1异步引擎
    var xmlHttpRequest = new XMLHttpRequest();
    //2打开
    xmlHttpRequest.open("get","${pageContext.request.contextPath}/ServletAjax151?name="+text,true);
    //3发送
    xmlHttpRequest.send(null);
    //4毁掉
    xmlHttpRequest.onreadystatechange=callback;
    //5
    function callback() {
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var data=xmlHttpRequest.responseText;
            if(data.trim()=="y"){
                $("#sp1").html("已被注册");
            }else{
                $("#sp1").html("可以注册");
            }
        }
    }

    
});
</script>
</body>
</html>
